<template>
  <div>



    <h1>hasError==>{{ numStore.hasError }}</h1>
    <h1>hasError==>{{ numStore.$state.hasError }}</h1>
    <h1>{{ numStore.secret }}</h1>
    <h1>{{ demoStore.secret }}</h1>
    <h1>{{ demoStore.hello }}</h1>
    <h1>{{ num }}</h1>
    <h1>{{ double }}</h1>
    
    <hr>
    <h1>{{ numStore.num }}</h1>
    <h1>{{ numStore.double }}</h1>
    <h1>{{ numStore.threeNum }}</h1>
    <h1>{{ numStore.randomNum(5) }}</h1>
    <h1>{{ numStore.doublePlusOne }}</h1>
    <h1>{{ numStore.nameAndLikes }}</h1>

    <button @click="numStore.numAdd()">num++</button>
    <button @click="changeNum">change num</button>
    <button @click="resetState">重置</button>
    <button @click="replaceState">替换</button>
    <button @click="demoAgeENum">age  num </button>
  </div>
</template>
<script setup>
import {storeToRefs} from 'pinia'
import {useNumStore} from '@/stores/num.js'
import { getCurrentInstance } from 'vue';
import {useDemoStore} from '@/stores/demo.js'
const numStore = useNumStore()
const demoStore = useDemoStore()
const currentInstance = getCurrentInstance()
const piniaInstace = currentInstance.appContext.config.globalProperties.$pinia
const {proxy} = currentInstance
// const {num,double,numAdd} = useNumStore()
const {num,double} = storeToRefs(useNumStore())

const changeNum = ()=>{
  // numStore.num = 123
  numStore.$patch({
    num:Math.floor(Math.random()*100),
    name:'zs'
  })
}
const resetState = ()=>{
  numStore.$reset()
}
const replaceState = ()=>{
  // numStore.$state= {feature:'xxx'}
  // pinia.state.value = {}
  // console.log($pinia);
 
  console.log("currentInstance==>",currentInstance);
  // piniaInstace.state.value = {feature:'xxx'}
  proxy.$pinia.state.value = {feature:'xxx'}
  // console.log("proxy.$pinia==>",proxy.$pinia);
}

// 订阅 state
numStore.$subscribe((mutation, state)=>{
  console.log("mutation===>",mutation);
  console.log("state===>",state);
},{ detached: true })



const demoAgeENum = ()=>{
  demoStore.demoAction("123","lisi")
}


const unsubscribe = demoStore.$onAction(({name,store,after,onError,args} )=>{
after((res)=>{
  console.log(res);
})

onError((err)=>{
  console.log(err);
})
},true)

// 手动删除监听器
// unsubscribe()


console.log("demoStore.hello==>",demoStore.hello);





















</script>
<style lang="scss" scoped>

</style>